<template>
<div class="layout-main">
<van-tabs background="#F7F7F7" duration="0.2" title-active-color="#1AA5FE" color="#1AA5FE" @change="setActive" v-model="active" animated swipeable>
	<van-tab title="全部" :name="0">
    <pullRefresh v-if="active == 0"  class="list-box" v-model="isLoading" @refresh="onRefresh">
      <van-list  v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
        <div class="index-li" v-for="item in list" :key="item.id">
          <div class="title ellipsis">{{item.title}}</div>
          <img class="pic" v-lazy="setImgUrl(item.titleImg)" />
          <div class="tips ellipsis-l2">{{item.introduct}}</div>
          <div class="info">
            <span><van-icon style=" font-size:0.24rem;" name="clock-o" />{{item.created | setTimeFormat}}</span>
            <span><van-icon name="eye-o" />{{item.clickNum}}</span>
            <span><van-icon name="good-job-o" />{{item.likeNum}}</span>
          </div>
        </div>
      </van-list>
    </pullRefresh>	
  </van-tab> 
	<van-tab v-for="(item,index) in tags" :key="item.id" :title="item.tagName" :name="index+1">
    <pullRefresh v-if="list.length > 0 && active == index+1"  class="list-box" v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
        <div class="index-li" v-for="item in list" :key="item.id">
          <div class="title ellipsis">{{item.title}}</div>
          <img class="pic" v-lazy="setImgUrl(item.titleImg)" />
          <div class="tips ellipsis-l2">{{item.introduct}}</div>
          <div class="info">
            <span><van-icon style=" font-size:0.24rem;" name="clock-o" />{{item.created | setTimeFormat}}</span>
            <span><van-icon name="eye-o" />{{item.clickNum}}</span>
            <span><van-icon name="good-job-o" />{{item.likeNum}}</span>
          </div>
        </div>
      </van-list>
    </pullRefresh>
    <div v-if="list.length == 0" class="res-li res-li-blank">
      <del></del><span>没有任何内容</span>
    </div>      
    	
  </van-tab>   
  
  
      
</van-tabs>


</div>
</template>
<script>
import pullRefresh from '@/components/pullRefresh.vue';
import {formatDate} from "@/filters";
import api from "@/global/api";
export default {
  components: {pullRefresh},
  data() {
    return {
			tags:[],
			list:[],
			isLoading:false,
			active:0,
			loading:false,
      finished:false,
      finishedText:'没有新数据了',
    };
  },  
  mounted() {
		this.page = 1;
		this.pageSize = 5;
		this.getTags();
		this.getData();
  },
	activated(){},
  methods: {
		async getTags(){
			let tags = await this.$http.get(api.getContentTags);
			this.tags = tags.data.data;
		},
		async getData(){
			this.list = [];
			if(this.active == 0){
				var _params = {page:this.page,pageSize:this.pageSize};
			}else{
			  var _tagId = this.tags[this.active-1].id;
				var _params = {page:this.page,pageSize:this.pageSize,tagId:_tagId};
			}
			let list = await this.$http.get(api.getContentList,{params:_params});	
			this.list = list.data.data;
			this.totalPage = list.data.totalPage;
			this.totalNum = list.data.totalNum;
			if(this.totalNum <= this.pageSize){
				this.finished = true;
				this.loading = false;
				this.finishedText = '';
			}else{
				this.finished = false;
				this.loading = false;
				this.finishedText = '没有新数据了';				
			}
		},
		setImgUrl(val){
			return api.cosHttp+val;
		},
		async onLoad(){
			if(this.page == this.totalPage){
				this.finished = true;
			}else{
				setTimeout( async () => {
					this.page ++;			
					let list = await this.$http.get(api.getContentList,{params:{page:this.page,pageSize:this.pageSize}});	
					let _list = list.data.data;			
					this.list = this.list.concat(_list);
					this.loading = false;
				}, 1500);
			}
		},
    setActive() {
			this.finished = false;
			this.page = 1;
			this.getData();
    }, 		
  	onRefresh() {
      setTimeout(() => {
				this.isLoading = false;
      }, 800);
    },			

    goToActive(_path){
      this.$router.push({path: _path}); 
    },

   
  },
	filters: {
		setTimeFormat(val){
			var paddingStr = function (_str) {
				return _str.length == 1 ? "0" + _str : _str
			}
			var _curDate = new Date(val);	
			var _YY = _curDate.getFullYear();
			var _MM = paddingStr(_curDate.getMonth() + 1 + '');
			var _DD = paddingStr(_curDate.getDate() + '');
			return `${_YY}-${_MM}-${_DD}`					
		}
	} 	 
}
</script>
<style scoped>
.index-li{ background: #FFFFFF; margin-bottom: 0.25rem; min-height: 2.8rem; width: 100%;  box-shadow: 0 4px 10px 0 rgba(56,58,61,0.10);border-radius:0.12rem; overflow: hidden;}
.index-li .title{ font-size:0.3rem; margin:0.24rem; font-weight:bold; color:#606365;}
.index-li .pic{ float:left; width:2.4rem; height:1.6rem; border-radius:0.06rem; margin:0 0.2rem 0 0.24rem;}
.index-li .tips{font-size:0.28rem; line-height:1.7; color: #999; margin-right:0.12rem;}
.index-li .info{ height:0.5rem; padding-top:0.3rem; color:#999; font-size:0.24rem;}
.index-li .info span{ margin-right:0.4rem;}
.index-li .info i{ vertical-align:middle;  margin-right:0.08rem;}
.list-box{height:calc(100vh - 2rem); padding:0.25rem 0.25rem 0; -webkit-overflow-scrolling:touch; overflow-y:auto;}

.res-li{ width: 3.25rem; margin:0.2rem 0 0.35rem 0.36rem; height: 3.56rem; border-radius:0.12rem;overflow: hidden;}
.res-li-blank{  width: 6.8rem; clear:both; height: 7rem; display: flex; flex-flow: column; align-items: center;}
.res-li-blank del{ width: 1.6rem; height: 1.6rem; background: url(../../assets/res-blank.png) no-repeat; background-size: 1.6rem 1.6rem; margin: 1.4rem auto 0.32rem;}
.res-li-blank span{ height: 0.22rem;  color:#BBB; line-height: 0.32rem;}

</style>